layui.define(["common"], (exports) => {
    "use strict";

    let $ = layui.$
    let form = layui.form
    let element = layui.element

    let vhc = {};

    let batchReplace = function (str, field, comment) {
        str = str.replace(/\%field/g, field)
        str = str.replace(/\%comment/g, comment)
        return str
    }

    // 绑定自定义的 tab 元素
    element.tab({
        headerElem: '.kb-build-box .kb-build-left ul>li',
        bodyElem: '.kb-build-box .kb-build-right>div'
    });

    form.on(`checkbox(table_show)`, function (data) {
        let elem = data.elem
        let checked = elem.checked
        let id = $(elem).parent().parent().attr("id")
        let title = $(elem).parent().parent().attr("title")
        if (checked) {
            let html = ""
            for (let key in vhc) {
                if (vhc.hasOwnProperty(key)) {
                    html += `<option value="${key}">${vhc[key].title}</option>`
                }
            }
            $(`#${id} .kb-is-table`).html(`
            <div class="layui-form-item">
                <label class="layui-form-label">控件类型</label>
                <div class="layui-input-inline">
                    <select name="data[${id}][type]" lay-verify="required" lay-filter="type"
                        data-field="${id}" data-comment="${title}">
                        <option value="">无</option>
                        ${html}
                    </select>
                </div>
            </div>
            <div class="kb-build-content">
                <div class="layui-card">
                    <div class="layui-card-header">view</div>
                    <div class="layui-card-body">
                        <div class="kb-build-view">

                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">html</div>
                    <div class="layui-card-body">
                        <div class="kb-build-html">
                            <textarea class="layui-textarea" name="data[${id}][html]"></textarea>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">code</div>
                    <div class="layui-card-body">
                        <div class="kb-build-code">
                            <textarea class="layui-textarea" name="data[${id}][code]"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            `)
        } else {
            $(`#${id} .kb-is-table`).html("")
        }
        form.render();
    })

    form.on('select(type)', function (data) {
        let elem = data.elem; // 获得 select 原始 DOM 对象
        let value = data.value; // 获得被选中的值

        let field = $(elem).attr("data-field")
        let comment = $(elem).attr("data-comment")

        let view = $(`#${field} .kb-build-view`)
        let html = $(`#${field} .kb-build-html`)
        let code = $(`#${field} .kb-build-code`)

        if (vhc.hasOwnProperty(value)) {
            view.html(batchReplace(vhc[value].view, field, comment))
            html.find("textarea").text(batchReplace(vhc[value].html, field, comment))
            code.find("textarea").text(batchReplace(vhc[value].code, field, comment))
        } else {
            view.html("")
            html.find("textarea").text("")
            code.find("textarea").text("")
        }
        form.render();
    });

    let build = {
        render: function (url) {
            $.get(url, (res) => {
                if (res.code == 0) {
                    vhc = res.data
                } else {
                    layer.msg(res.msg)
                }
            })
        }
    }

    exports('build', build);
})